import { createRouter, createWebHistory } from 'vue-router'
// 导入所有视图组件
import HomeView from '../views/HomeView.vue'
import DishesList from '../views/DishesList.vue' // 菜品列表路由入口（容器组件）
import DishDetail from '../views/DishDetail.vue' // 菜品详情页
import OrdersView from '../views/OrdersView.vue' // 订单管理页
import CustomersView from '../views/CustomersView.vue' // 客户管理页
import PromotionsView from '../views/PromotionsView.vue' // 促销活动页
import InventoryView from '../views/InventoryView.vue' // 库存管理页
import LoginView from '../views/LoginView.vue' // 登录页
import RegisterView from '../views/RegisterView.vue' // 注册页
import SettingsView from '../views/SettingsView.vue' // 系统设置页
import NotFoundView from '../views/NotFoundView.vue' // 404页面
import CustomerDetails from '../components/CustomerDetails.vue' // 客户详情组件（子路由）
import NewDish from '../views/NewDish.vue' // 新增菜品组件

// 定义路由表
const routes = [
  {
    path: '/', // 根路径
    name: 'home', // 路由名称
    component: HomeView, // 对应的组件
    meta: { title: '首页' } // 元信息（用于设置页面标题等）
  },
  {
    path: '/dishes', // 菜品列表路径
    name: 'dishesList', // 统一驼峰命名
    component: DishesList, // 路由入口组件（容器）
    meta: { title: '菜品管理' } // 元信息
  },
  {
    path: '/dishes/new', // 新增菜品路径
    name: 'newDish',
    component: NewDish,
    meta: { title: '新增菜品' }
  },
  {
    path: '/dishes/:id', // 动态路由（菜品详情，:id为参数）
    name: 'dishDetail', // 统一驼峰命名
    component: DishDetail, // 菜品详情组件
    meta: { title: '菜品详情' } // 元信息
  },
  {
    path: '/orders', // 订单管理路径
    name: 'orders', // 路由名称
    component: OrdersView, // 对应的组件
    meta: { title: '订单管理' } // 元信息
  },
  {
    path: '/customers', // 客户管理路径
    name: 'customers', // 路由名称
    component: CustomersView, // 对应的组件
    meta: { title: '客户管理' }, // 元信息
    children: [ // 子路由（客户详情）
      {
        path: ':id', // 动态子路由（客户ID）
        component: CustomerDetails // 客户详情组件
      }
    ]
  },
  {
    path: '/promotions', // 促销活动路径
    name: 'promotions', // 路由名称
    component: PromotionsView, // 对应的组件
    meta: { title: '促销活动' } // 元信息
  },
  {
    path: '/inventory', // 库存管理路径
    name: 'inventory', // 路由名称
    component: InventoryView, // 对应的组件
    meta: { title: '库存管理' } // 元信息
  },
  {
    path: '/login', // 登录路径
    name: 'login', // 路由名称
    component: LoginView, // 对应的组件
    meta: { 
      title: '登录', 
      guestOnly: true // 元信息（标记为仅限访客访问）
    }
  },
  {
    path: '/register', // 注册路径
    name: 'register', // 路由名称
    component: RegisterView, // 对应的组件
    meta: { 
      title: '注册', 
      guestOnly: true // 元信息（标记为仅限访客访问）
    }
  },
  {
    path: '/settings', // 系统设置路径
    name: 'settings', // 路由名称
    component: SettingsView, // 对应的组件
    meta: { 
      title: '系统设置', 
      requiresAuth: true // 元信息（标记为需要认证）
    }
  },
  {
    path: '/404', // 404页面路径
    name: 'notFound', // 路由名称
    component: NotFoundView, // 对应的组件
    meta: { title: '页面未找到' } // 元信息
  },
  {
    // 通配符路由（匹配所有未定义路径）
    path: '/:pathMatch(.*)*', 
    redirect: to => ({ // 重定向到404页面
      path: '/404',
      query: { originalPath: to.fullPath } // 传递原路径参数
    })
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 历史模式（浏览器URL显示真实路径）
  routes, // 路由表
  scrollBehavior(to, from, savedPosition) { // 路由切换时的滚动行为
    return savedPosition || { top: 0 } // 切换路由时回到顶部
  }
})

// 导航守卫（全局前置钩子）
router.beforeEach((to, from, next) => {
  // 设置页面标题：优先使用路由元信息中的title，否则用默认标题
  document.title = to.meta.title || '健康饮食订餐管理系统'
  
  // 获取认证Token（模拟登录状态）
  const isAuthenticated = localStorage.getItem('authToken')
  
  // 需要认证的路由，未登录则重定向到登录页
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ 
      name: 'login', 
      query: { redirect: to.fullPath } // 传递目标路径，登录后返回
    })
  // 仅限访客的路由，已登录则重定向到首页
  } else if (to.meta.guestOnly && isAuthenticated) {
    next({ name: 'home' })
  } else {
    next() // 允许访问
  }
})

export default router // 导出路由实例  